<template>
  <div>
    <h3>门店增加</h3>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td>门店名称</td>
          <td><input type="text" v-model="queryInfo.ShopName" /></td>
        </tr>
        <tr>
          <td>门店电话</td>
          <td>
            <input type="text" v-model="queryInfo.Phone" maxlength="11" />
          </td>
        </tr>
        <tr>
          <td>门店地址</td>
          <td><input type="text" v-model="queryInfo.Adderss" /></td>
        </tr>
        <tr>
          <td>是否启用</td>
          <td>
            <input
              type="radio"
              name="use"
              v-model="queryInfo.State"
              :value="1"
            />是
            <input
              type="radio"
              name="use"
              v-model="queryInfo.State"
              :value="0"
            />否
          </td>
        </tr>
        <tr>
          <td>门店图片</td>
          <td>
            <input type="file" @change="changeImg" />
            <img :src="queryInfo.Photo" width="100" height="100" />
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <input
              type="button"
              value="添加"
              class="btn btn-success"
              @click="ok"
            />
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
  
  <script setup lang="ts">
import axios from "axios";
import { reactive } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

//向后端传递的数据
let queryInfo = reactive({
  ShopName: "",
  Phone: "",
  Adderss: "",
  Photo: "",
  State: 1,
});

//1.上传图片
const changeImg = (e: any) => {
  //将文件转成FormData格式
  var obj = e.target.files[0];
  var f = new FormData();
  f.append("file", obj);
  //发送网络请求完成上传
  axios({
    url: "/api/Commons/UpoadImgs",
    method: "post",
    data: f,
  })
    .then((res) => {
      console.log(res);
      //上传成功   1.成功的图片地址存储  2.预览图片
      queryInfo.Photo = "https://localhost:7291" + res.data.data;
    })
    .catch((err) => {
      console.log(err);
    });
};

//2增加操作
const ok = () => {
  //1.判断非空+有效性
  if (queryInfo.ShopName == "") {
    alert("门店名称不能为空");
    return;
  }

  if (queryInfo.Phone == "") {
    alert("门店电话不能为空");
    return;
  }

  if (queryInfo.Adderss == "") {
    alert("门店地址不能为空");
    return;
  }

  if (queryInfo.Photo == "") {
    alert("门店图片不能为空");
    return;
  }
  //2.发送网络请求完成填加操作
  axios({
    url: "/api/Shop/ShopAdd",
    method: "post",
    data: queryInfo,
  })
    .then((res) => {
      console.log(res);
      if (res.data == 1) {
        alert("添加成功");
        router.push("/shopList");
      } else if (res.data == -1) {
        alert("门店名称重复");
        return;
      } else {
        alert("添加失败");
        return;
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>
  
  <style scoped></style>